<template>
	<div>
		<el-dialog v-model="upLoadVisible" title="" width="25%">
			<div class="title">Quit the club？</div>
			<div>Once you quit, you have to pay again to rejoin</div>
			<div class="btns f f-a-c f-j-b">
				<div @click.stop="upLoadVisible = false" class="rigBtn hand">No</div>
				<div @click="clickyse" class="lefBtn hand">Yes</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
	import { ref } from "vue";
	import { Plus } from "@element-plus/icons-vue";
	import { ElMessage, dayjs } from "element-plus";
	import { QuitTheClub } from "@/api/knowClub/index.js";
	let upLoadVisible = ref(false);
	let ind2 = ref(1);
	let ind1s = ref(1);
	let money = ref(0);
	let obj = ref({});
	let id = ref("");
	const emit = defineEmits(["refresh"]);
	// 点击确认
	const clickyse = async () => {
		// return;
		let n = await QuitTheClub({ subscriptionStripeId: id.value });
		if (n.code == 200) {
			ElMessage.success(n.msg);
			upLoadVisible.value = false;
			// refresh();
			emit("refresh");
		}
	};
	// 暴露给父组件
	defineExpose({
		upLoadVisible,
		obj,
		money,
		id
	});
</script>
<style scoped lang="scss">
	@function px($px) {
		@return calc($px / 1.5) * 1px;
	}
	.btns {
		margin-top: 30px;
		.lefBtn {
			width: 88px;
			height: 40px;
			line-height: 40px;
			background: #02102e;
			border-radius: 6px;
			font-size: 14px;
			font-family: Manrope, Manrope-700;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
		}
		.rigBtn {
			width: 83px;
			height: 40px;
			line-height: 40px;
			background: #f7f7f9;
			border-radius: 6px;
			font-size: 14px;
			font-family: Manrope, Manrope-700;
			font-weight: 700;
			text-align: center;
			color: #2c2d2e;
		}
	}
	::v-deep .el-dialog {
		border-radius: px(17) !important;
		padding: 30px 50px 50px 50px;
	}
	::v-deep .el-dialog__headerbtn .el-dialog__close {
		font-size: px(30);
	}
	.textarea {
		height: 220px !important;
	}
	.upLoad {
		margin-top: px(10);
		max-height: px(300);
		overflow: auto;
	}
	.upLoad::-webkit-scrollbar {
		width: px(7); /* 滚动条宽度 */
	}
	.upLoad::-webkit-scrollbar-track {
		background: #f7f7f9; /* 滚动条轨道背景色 */
	}
	.upLoad::-webkit-scrollbar-thumb {
		background: #c1c5cb; /* 滚动条滑块颜色 */
		border-radius: px(10);
	}
	.upLoad::-webkit-scrollbar-thumb:hover {
		background: #c1c5cb; /* 鼠标悬停时滚动条滑块颜色 */
	}
	.btnBox {
		justify-content: end;
		margin-top: px(15);
		.botBtn {
			font-size: px(21);
			font-family: Manrope, Manrope-700;
			font-weight: 700;
			text-align: LEFT;
			color: #ffffff;
			padding: px(16) px(40);
			background: #02102e;
			border-radius: px(10);
		}
	}
	.topTit {
		font-size: px(26.6);
		font-family: Manrope, Manrope-700;
		font-weight: 700;
		text-align: LEFT;
		color: #000000;
		margin-bottom: px(30);
	}
	::v-deep .ant-input:focus {
		border-color: #000000 !important;
		box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
	}
	::v-deep .ant-input:hover {
		border-color: #000000 !important;
		box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
	}
	::v-deep .el-upload--picture-card {
		height: px(120) !important;
		width: px(120) !important;
	}
	::v-deep .el-upload-list--picture-card .el-upload-list__item {
		height: px(120) !important;
		width: px(120) !important;
	}
	.back {
		width: 100%;
		height: 404px;
		background: #f7f7f9;
		border-radius: 16px;
		padding: 20px;
	}
	.title {
		font-size: 22px;
		font-family: Manrope, Manrope-700;
		font-weight: 700;
		text-align: center;
		margin-bottom: 20px;
		color: #02102e;
	}
	.ul {
		margin-bottom: 20px;

		.li {
			font-size: 14px;
			font-family: Manrope, Manrope-400;
			font-weight: 400;
			text-align: LEFT;
			color: #02102e;
			margin-bottom: 8px;

			.dian {
				width: 6px;
				height: 6px;
				border-radius: 3px;
				background-color: #02102e;
				margin-right: 6px;
			}
		}
	}
	.setMonth {
		.topThon {
			width: 100%;
			background: #ffffff;
			border: 1px solid #eaebee;
			border-radius: 12px;
			padding: 24px;

			.lefPlan {
				font-size: 16px;
				font-family: Manrope, Manrope-500;
				font-weight: 500;
				text-align: LEFT;
				color: #02102e;
			}

			.rigmonth {
				font-size: 16px;
				font-family: Manrope, Manrope-500;
				font-weight: 500;
				text-align: LEFT;
				color: #02102e;
			}

			.lefDao {
				font-size: 12px;
				font-family: Manrope, Manrope-500;
				font-weight: 500;
				text-align: LEFT;
				color: #4260ff;
			}

			.rigDao {
				font-size: 12px;
				font-family: Manrope, Manrope-500;
				font-weight: 500;
				text-align: LEFT;
				color: #4260ff;
			}
		}
	}
	.btn {
		font-size: 16px;
		font-family: Manrope, Manrope-700;
		font-weight: 700;
		text-align: center;
		width: 100%;
		height: 48px;
		line-height: 48px;
		background: #02102e;
		border-radius: 8px;
		color: #ffffff;
		margin-top: 40px;
	}
	.borAct {
		border: 1px solid #727377 !important;
	}
</style>
